<template>
	<view class="page">
		<u-navbar v-if='value!=3' border :placeholder="true" leftIconSize='0' title="则秀运动">
		</u-navbar>
		<view class="bodyBox">
			<home v-if="value==0" @getDate='getDate'/>
			<acitve v-if="value==1" />
			<shop v-if="value==2" />
			<my v-if="value==3" />
		</view>
		<view>
			<u-tabbar :value="value" :fixed="false" :placeholder="false" >
				<u-tabbar-item text="首页" icon="home" @click="click"></u-tabbar-item>
				<u-tabbar-item text="动态" icon="photo" @click="click" :badge="unreadFeedCount"></u-tabbar-item>
				<u-tabbar-item text="商城" icon="bag" @click="click"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" @click="click"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import home from "./components/home.vue"
	import my from "./components/my.vue"
	import shop from "./components/shop.vue"
	import acitve from "./components/acitve.vue"
	export default {
		components: {
			home,
			my,
			acitve,
			shop
		},
		data() {
			return {
				unreadFeedCount:0,
				value: 0,
			}
		},
		onLoad() {
		},
		methods: {
			click(e) {
				this.value = e
				if(e==1){
					this.unreadFeedCount=null
				}
			},
			getDate(e){
				this.unreadFeedCount=e.unreadFeedCount
				console.log(e,this.unreadFeedCount)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.navTitle {
		font-size: 26rpx;
		font-weight: 600;

		>text {
			margin: 0 10rpx;
		}

		>text:first-child {
			font-size: 28rpx;
			color: #3975c6
		}
	}


	.page {
		display: flex;
		height: 100vh;
		flex-direction: column;
		box-sizing: border-box;
	}

	.bodyBox {
		flex: 1;
		overflow: hidden;
	}
</style>